<template>
	<!--   :style="{background:'url('+img.url+')'}"    -->
	<div  :style="{background:'url('+img.url+')'} ">
		<el-container style="width: 100%; height: 100%;">
		    <el-header style="background-color: black;height: 5em;">
				<div style="margin-left: 15%; height: 100%;">
					<div style="width:100%;display: flex; height: 100%;">		
						<div style="color: #8cfffb; font-size:30px;font-weight: bold;">
							Myself-Blog
						</div>
						<el-menu style="background-color: black;border-right: 0; display: flex;" router>
							<el-row style="height: 100%; width: 100%;">
								<el-col :span="4" style="height: 100%;">
									<el-menu-item index="/home" style="margin-top: 0.3em;">
										<a style="font-size: 15px; color: #afc2b8; margin: auto;"><i class="el-icon-s-home"></i>首页</a>
									</el-menu-item>
								</el-col>
								<el-col :span="4">
									<el-menu-item index="/type" style="margin-top: 0.3em;">
										<a style="font-size: 15px; color: #afc2b8;"><i class="el-icon-menu"></i>分类</a>
									</el-menu-item>
								</el-col>
								<el-col :span="4">
									<el-menu-item index="/tag" style="margin-top: 0.3em;">
										<a style="font-size: 15px; color: #afc2b8;"><i class="el-icon-s-grid"></i>标签</a>
									</el-menu-item>
								</el-col>
								<el-col :span="4">
									<el-menu-item index="/file" style="margin-top: 0.3em;">
										<a style="font-size: 15px; color: #afc2b8;"><i class="el-icon-s-cooperation"></i>归档</a>
									</el-menu-item>
								</el-col>
								<el-col :span="4">
									<el-menu-item index="/friend" style="margin-top: 0.3em;">
										<a style="font-size: 15px; color: #afc2b8;"><i class="el-icon-s-promotion"></i>友链</a>
									</el-menu-item>
								</el-col>
								<el-col :span="4">
									<el-menu-item index="/message" style="margin-top: 0.3em;">
										<a style="font-size: 15px; color: #afc2b8;"><i class="el-icon-s-comment"></i>留言</a>
									</el-menu-item>
								</el-col>
							</el-row>
						</el-menu>
						<div style="display: flex;">
							<el-input
							style="margin: auto;"
							  v-model="search"
							  size="mini"
							  placeholder="输入关键字搜索"/>
							<button @click="searchButton" type="button" style="height: 2em; width: 6em;margin: auto 0.5em;">搜索</button>
						</div>
					</div>
				</div>
			</el-header>
		    <el-main style="height: auto;">
				<div>
					<router-view></router-view>
				</div>
		    </el-main>
		    <el-footer style="background-color: black; height: 250px;">
				<div style="width: 60%;margin-left: 20%;">
					<div style="width: 100%; display: flex;">
						<div style="width: 30%;height: 150px;margin-top: 10px;">
							<el-image
							  style="width: 140px; height: 140px;margin-top: 5px;"
							  :src="require('@/assets/image/my_weixin.jpg')"
							  fit="cover"></el-image>
						</div>
						 <el-divider direction="vertical"></el-divider>
						<div style="width: 30%;height: 150px;margin-top: 10px;">
							<div style="margin-top: 15px;">
								<div style="height: 1.5em; color: #afc2b8; font-weight: bold;">联系我</div>
								<div style="height: 1.5em;  color: #afc2b8;">QQ: 1732805924</div>
								<div style="height: 1.5em;color: #afc2b8;">Email: tho_ma_s@163.com</div>
							</div>
						</div>
						 <el-divider direction="vertical"></el-divider>
						<div style="width: 40%;height: 150px;margin-top: 10px;">
							<div style="margin-top: 15px;">
								<div style="height: 1.5em; color: #afc2b8; font-weight: bold;">INTRODUCE</div>
								<div style="height: 1.5em;  color: #afc2b8;">这是我的个人博客，会分享关于编程、写</div>
								<div style="height: 1.5em;  color: #afc2b8;">作、思考的相关内容，希望可以给到这儿</div>
								<div style="height: 1.5em;  color: #afc2b8;">的人有所帮助......</div>
							</div>
						</div>
					</div>
					<el-divider></el-divider>
					<span style="color: #8cfffb; margin: auto;">Copyright@2021 - 2049 Myself-Blog designed by Cxp</span>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				img:{
				    url:require('@/assets/image/bk.gif'),
				    name: 'bg'
				},
				search:"",
				starsCount: 1000, //星星数量
				distance: 900, //间距
			}
		},
		methods:{
		    searchButton(){
				var that=this
				var search_jump=that.search.replace(/(^\s*)|(\s*$)/g, "");
				if(search_jump!=""){
					that.$message('我知道你想搜索 '+search_jump+" 。\n但是该功能正在实现中!");
				}else{
					that.$message({
					  message: '搜索框不能为空或者全为空格哟!',
					  type: 'warning'
					});
				}
			}
		},
		mounted() {
		    setTimeout(() => {
		      window.L2Dwidget.init({
		          pluginRootPath: 'live2dw/',
		          pluginJsPath: 'lib/',
		          pluginModelPath: 'live2d-widget-model-miku/assets/',
		          tagMode: false,
		          debug: false,
		          model: { jsonPath: '../live2dw/live2d-widget-model-miku/assets/miku.model.json' },
		          display: { position: 'right', width: 300, height: 600 },
		          mobile: { show: true },
		          log: false
		          })
		    }, 1000);
		},
	};
</script>

<style scoped="">
	@import "./assets/css/me.css";
	
 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
	background: url(assets/image/bk.gif);
  }
  
  .nabor_item{
	  color: #000000;
	  font-size: medium;
  } 
  .el_menu_item{
	  height: 1.5em;
	  margin: auto auto;
  }
   .el-divider--vertical {
		height: 150px;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
		color: red;
	}
	.el-divider--horizontal{
		margin: 0.5em 0;
	}
	.el-main{
		padding: 0;
	}
</style>
